<template>
	<div style="width: 100%;height: 100%;">
		<el-container style="position: absolute;top: 115px;bottom: 0;left: 200px;right: 0; background-color: #f8f9fa;overflow: hidden;">
			<!-- 头部导航 -->
			<el-header>
				<el-form :inline="true">
					<el-form-item>
						<el-select v-model="order" size="mini">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-input placeholder="输入图片名称" size="mini" v-model="keyword"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="success" size="mini" @click="getAside">搜索</el-button>
					</el-form-item>
				</el-form>
				<el-form :inline="true">
					<el-form-item>
						<el-button type="primary" size="mini" v-show="ids.length>0" @click="DelCheckedImg">选中删除</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="success" size="mini" @click="createImg=true">创建相册</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="warning" size="mini" @click="imageForm=true">上传图片</el-button>
					</el-form-item>
				</el-form>
			</el-header>
			<el-container>
				<!-- 左侧菜单 -->
				<el-aside width="200px" style="position: absolute;top: 60px;left: 0;bottom: 60px;">
					<ul class="aside-list">
						<li v-for="(item,index) in aside" :class="{act:cid==item.id}" @click="changeLeft(item.id)">
							<p>{{item.name}}</p>
							<el-dropdown @command="editImage">
								<el-button size="mini">
									{{item.images_count}}
									<i class="el-icon-arrow-down el-icon--right"></i>
								</el-button>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item :command="{type:'edit',obj:item}">修改</el-dropdown-item>
									<el-dropdown-item :command="{type:'del',id:item.id}">删除</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</li>
					</ul>
				</el-aside>
				<el-container style="width: 100%;">
					<!-- 主要内容 -->
					<el-main style="position: absolute;top: 60px;left:200px;bottom: 60px;right: 0;">
						<div class="picture">
							<div class="images-main" v-for="(item,index) in imglist">
								<div class="img">
									<el-image :src="item.url" style="width: 100%; height: 175px; " :preview-src-list="[item.url]" />
									<p class="image_name">{{item.name}}</p>
								</div>
								<div class="btns">
									<!-- 复选框 -->
									<el-button size="mini">
										<input type="checkbox" v-model="ids" :value="item.id" />
									</el-button>
									<!-- 修改图片名称 -->
									<el-button class="el-icon-edit" size="mini" @click="updateName(item.id,item.name)"></el-button>
									<!-- 删除单张图片 -->
									<el-button class="el-icon-delete" size="mini" @click="delImage(item.id)"></el-button>
								</div>
							</div>
						</div>
					</el-main>
				</el-container>
				<el-container>
					<!-- 底部 -->
					<el-footer style="position: absolute; bottom: 0px;right: 0px;left: 0px; padding: 10px;box-sizing: border-box;">
						<el-pagination @size-change="changesize" @current-change="changepage" :current-page="page" :page-sizes="[10,20,30,40]"
						 :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
						</el-pagination>
					</el-footer>
				</el-container>
			</el-container>
		</el-container>
		<!-- 图片上传 -->
		<el-dialog title="图片上传" :visible.sync="imageForm" @close="getAside">
			<div style="display: flex; justify-content: center;">
				<el-upload class="upload-demo" drag action="/api/image/upload" :headers="{ token:this.$store.state.token }" :data="{ image_class_id:this.cid}"
				 :on-success="onSuccess" name="img" multiple>
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
				</el-upload>
			</div>
		</el-dialog>
		<!-- 创建相册的弹框 -->
		<el-dialog title="创建相册" :visible.sync="createImg">
			<el-form>
				<el-form-item label="创建相册" :label-width="'80px'">
					<el-input size="small" v-model="class_name" placeholder="请输入相册名称"></el-input>
				</el-form-item>
				<el-form-item label="相册排序" :label-width="'80px'">
					<el-input-number v-model="class_order" :min="1" size="small"></el-input-number>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="createImg = false">取 消</el-button>
				<el-button type="primary" @click="createImage">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 编辑相册的弹框 -->
		<el-dialog title="修改相册" :visible.sync="editImg">
			<el-form>
				<el-form-item label="相册名称" :label-width="'80px'">
					<el-input size="small" v-model="edit.name" placeholder="请输入相册名称"></el-input>
				</el-form-item>
				<el-form-item label="相册排序" :label-width="'80px'">
					<el-input-number v-model="edit.order" :min="1" size="small"></el-input-number>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="editImg = false">取 消</el-button>
				<el-button type="primary" @click="editimgs">保存</el-button>
			</div>
		</el-dialog>
		<!-- 编辑相册名称 -->
		<el-dialog title="修改名称" :visible.sync="imageTitle">
			<el-form>
				<el-form-item label="请输入新名称" :label-width="'100px'">
					<el-input size="small" v-model="editImageName.name"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="imageTitle = false">取消</el-button>
				<el-button type="primary" @click="saveImage">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		// 组件名称
		name: 'demo',
		// 组件参数 接收来自父组件的数据
		props: [],
		// 局部注册的组件
		components: {},
		// 组件状态值
		data() {
			return {
				options: [{
					value: '选项1',
					label: '升序'
				}, {
					value: '选项2',
					label: '降序'
				}],
				value: '升序',
				// 分页参数
				page: 1,
				limit: 10,
				total: 0,
				// 左侧分类列表
				aside: [],
				cid: "", //相册分类id
				keyword: "",
				order: "",
				imglist: [],
				imageForm: false,
				// 创建相册
				createImg: false,
				class_order: 0,
				class_name: "",
				// 编辑相册
				editImg: false,
				edit: {
					name: "",
					order: "",
					id: "",
				},
				// 修改相册名称
				imageTitle: false,
				editImageName: {
					id: 0,
					name: "",
				},
				// 选中删除
				ids: [],
			}
		},
		mounted() {
			this.getAside();
		},
		// 计算属性
		computed: {},
		// 侦听器
		watch: {},
		// 组件方法
		methods: {
			// 获取左侧菜单数据
			getAside() {
				this.$axios.get('/api/imageclass/1').then(res => {
					console.log(res)
					this.aside = res.data.list;
					this.cid = res.data.list[0].id;
					this.getImages();
				}).catch(error => {
					console.log(error)
				})
			},
			// 获取右侧相册数据
			getImages() {
				this.$axios.get(
						`/api/imageclass/${this.cid}/image/${this.page}?limit=${this.limit}&order=${this.order}&keyword=${this.keyword}`)
					.then(res => {
						console.log(res)
						this.imglist = res.data.list;
						this.total = res.data.totalCount;
					}).catch(error => {
						console.log(error)
					})
			},
			// 点击左侧菜单切换相册分类
			changeLeft(id) {
				this.cid = id;
				this.page = 1;
				this.getImages();
			},
			// 分页
			changesize(size) {
				this.limit = size;
				this.getImages();
			},
			changepage(page) {
				this.page = page;
				this.getImages();
			},
			// 创建相册
			createImage() {
				if (this.class_name == "" || this.class_order == "") {
					this.$message.error('相册名称或排序不能为空');
					return false
				}
				// 请求数据
				this.$axios.post('/api/imageclass', {
					order: this.class_order,
					name: this.class_name
				}).then(res => {
					console.log(res)
					this.getAside();
					this.$message.success("创建成功")
					this.createImg = false;
				}).catch(error => {
					console.log(error.response.data.msg)
					return false
				})
			},

			// 编辑相册名称
			editImage(command) {
				if (command.type == "edit") {
					this.editImg = true;

					this.edit = {
						id: command.obj.id,
						name: command.obj.name,
						order: command.obj.order,
					}
				};
				// 删除相册分类
				if (command.type == "del") {
					this.$confirm('确定删除吗', '删除', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.removeImage(command.id);
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				}
			},
			// 请求编辑相册名称数据
			editimgs() {
				this.$axios.post('/api/imageclass/' + this.edit.id, {
					name: this.edit.name,
					order: this.edit.order
				}).then(res => {
					this.$message.success("编辑成功");
					this.editImg = false;
					this.getAside();
				})
			},
			// 请求删除数据
			removeImage(id) {
				this.$axios.delete('api/imageclass/' + id).then(res => {
					this.getAside();
				})
			},
			onSuccess(res) {
				console.log(res)
			},
			// 修改相册图片名称
			updateName(id, name) {
				console.log(id, name)
				this.imageTitle = true;
				this.editImageName = {
					id: id,
					name: name,
				}
			},
			// 点击保存修改成功
			saveImage() {
				this.$axios.post('/api/image/' + this.editImageName.id, this.editImageName).then(res => {
					console.log(res)
					this.$message.success("修改成功");
					this.getAside();
					this.imageTitle = false;
				})
			},
			// 删除图片
			delImage(id) {
				this.$confirm('真的要删除吗,亲', '删除', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.delete(`/api/image/${id}`).then(res => {
						console.log(res)
						this.getAside();
					})
					this.$message({
						type: 'success',
						message: '删除成功'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			// 选中删除
			DelCheckedImg() {
				this.$axios.post(`/api/image/delete_all`, {
					ids: this.ids
				}).then(res => {
					console.log(res)
					this.getAside();
				})
			}

		},
		/**
		 * 组件实例创建完成
		 */
		created() {},
	}
</script>

<style lang="scss" scoped>
	.el-header {
		border-bottom: 1px solid #dee2e6;
		display: flex;
		justify-content: space-between;
		padding-top: 10px;
		box-sizing: border-box;
	}

	.el-footer {
		line-height: 60px;
		border-bottom: 1px solid #dee2e6;
	}

	.el-aside {
		border-right: 1px solid #dee2e6;
		border-bottom: 1px solid #dee2e6;

		.aside-list {
			width: 100%;
			padding: 0px;
			margin: 0px;
			
			.act{
				background-color: #f0f9eb;
				color: #67C23A;
				border-color: #c2e7b0;
			}

			li {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 7px;
				box-sizing: border-box;
				border-bottom: 1px solid #DDDDDD;
				cursor: pointer;
			}
		}
	}

	.el-main {
		border-bottom: 1px solid #dee2e6;

		.picture {
			display: flex;
			flex-wrap: wrap;

			.images-main {
				width: 16%;
				height: 220px;
				border: 1px solid #DDDDDD;
				margin-left: 10px;
				background-color: #fff;
				margin-bottom: 10px;

				.btns {
					padding: 6px;
					box-sizing: border-box;
					display: flex;
					flex-wrap: wrap;
				}

				.img {
					position: relative;
					border-bottom: 1px solid #DDDDDD;

					.image_name {
						width: 175px;
						color: #fff;
						padding: 8px;
						box-sizing: border-box;
						position: absolute;
						top: 135px;
						font-size: 12px;
						background-color: rgba(0, 0, 0, .5);
					}
				}
			}
		}
	}
</style>
